<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script>
window.onload = function (){
	var oUl = document.getElementById('list');
	var aLi = oUl.getElementsByTagName('li');
	//var num = 0;

	for (var i = 0; i < aLi.length; i++) {
		fnCount(aLi[i]);
	};

	function fnCount(oLi){
		var aInp = oLi.getElementsByTagName('input');
		var oStrong = oLi.getElementsByTagName('strong')[0];
		var oEm = oLi.getElementsByTagName('em')[0];
		var oSpan = oLi.getElementsByTagName('span')[0];
		var n = Number(oStrong.innerHTML)			//'0'=>0	凡是从html中获取的都是字符串类型
		var per = parseFloat(oEm.innerHTML);		//'12.5元'=>12.5
/* 其中n和per必须设定变量存起来，否则如果只由num控制，因为num是变的，这会导致上一次点击时产生的num值会传给另一个按钮，导致另一个按钮无法从0正常开始，比如会从0直接调到6再正常递增  */
		aInp[1].onclick = function (){
			n ++;
			oStrong.innerHTML = n;
			oSpan.innerHTML = n*per +'元';
			detail();
		}

		aInp[0].onclick = function (){
			if(n>0) n --;
			oStrong.innerHTML = n;
			oSpan.innerHTML = n*per +'元';
			detail();
		}
	}



	function detail(){
		var aStrong = oUl.getElementsByTagName('strong');
		var aSpan = oUl.getElementsByTagName('span');
		var aEm = oUl.getElementsByTagName('em');
		var oP = document.getElementsByTagName('p')[0];
		var much = 0;
		var cost = 0;
		var arr = [];
		var arr2 = [0];			//给了初始值是因为，下面有用到arr2[0]，要是为[]，当件数都减少到0，最贵都就变成undefined了
		var max = 0;

		for (var i = 0; i < aLi.length; i++) {
			much += parseInt(aStrong[i].innerHTML);
			cost += parseFloat(aSpan[i].innerHTML);
		};

		//下面两个for都是在找最高单价
		for (var i = 0; i < aStrong.length; i++) {
			arr.push(parseFloat(aStrong[i].innerHTML));
			if(arr[i] != 0){
				arr2.push(parseFloat(aEm[i].innerHTML));
			}
		};							//得到了当件数不为0时，所对应的单价的数组arr2
		max = arr2[0];
		for (var i = 0; i < arr2.length; i++) {
			if (arr2[i] > max)	max = arr2[i];
		};

		oP.innerHTML = '商品合计共：'+
			'<strong>'+ much +'</strong>'+'件，共花费了：'+
			'<span>'+ cost +'</span>'+'元'+'<br />'+
			'其中最贵的商品单价是：'+ max +'元'
	}
}
</script>
</head>
<body>
	<ul id="list">
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>12.5元</em>
    小计：<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>10.5元</em>
    小计：<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>8.5元</em>
    小计：<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>8元</em>
    小计：<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>14.5元</em>
    小计：<span>0元</span>
  </li>
</ul>

<p>
商品合计共：<strong>0</strong>件，共花费了：<span>0</span>元<br />
其中最贵的商品单价是：0元
</p>
</body>
</html>